<template>
  <div>
    <!--输入框-->
    <div class="permissManaTool">
      <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
        <template slot="prepend">ROLE_</template>
      </el-input>
      <el-input @keydown.enter.native="onAddRole" size="small" v-model="role.nameZh" placeholder="请输入角色中文名"></el-input>
      <el-button @click="onAddRole" size="small" type="primary" icon="el-icon-plus">添加角色</el-button>
    </div>


    <!--数据显示折叠面板-->
    <div class="permissManaMain">
      <el-collapse v-model="activeName" @change="changeCollapse" accordion>
        <el-collapse-item v-for="(item, index) in roles" :key="item.id" :title="item.nameZh" :name="item.id">
          <!--卡片-->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button @click="onDeleteRole(item)" icon="el-icon-delete" style="float: right; padding: 3px 0" type="danger"></el-button>
            </div>
            <div>
              <!--树行控件-->
              <el-tree show-checkbox
                       :key="item.id"
                       default-expand-all
                       ref="tree"
                       node-key="id"
                       :default-checked-keys="selectMenus"
                       :data="allMenus"
                       :props="defaultProps">
              </el-tree>

              <!--按钮-->
              <div style="display: flex;justify-content: flex-end">
                <el-button @click="cancelUpdate" size="mini">取消修改</el-button>
                <el-button @click="onUpdate(item.id, index)" size="mini" type="primary">确认修改</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "PermissMana",
  data(){
    return {
      role: {
        name: '',
        nameZh: ''
      },
      roles: [],
      allMenus: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectMenus: [],
      activeName: -1
    }
  },
  methods: {
    //初始化角色数据
    initRoles(){
      this.getRequest('/system/basic/permiss/').then(res => {
        if (res){
          this.roles = res
        }
      })
    },
    //初始化菜单
    initAllMenus(){
      this.getRequest('/system/basic/permiss/menus').then(res => {
        if (res){
          this.allMenus = res
        }
      })
    },
    //添加角色
    onAddRole(){
      if (this.role.name && this.role.nameZh) {
        this.postRequest('/system/basic/permiss/role', this.role).then(res => {
          if (res){
            //刷新数据
            this.initRoles()
            this.role.name = ''
            this.role.nameZh = ''
          }
        })
      }else {
        this.$message.error('所有字段不能为空！')
      }
    },
    //删除角色
    onDeleteRole(row){
      this.$confirm('此操作将永久删除：'+ row.nameZh +'，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/permiss/role/' + row.id).then(res => {
          if (res){
            //删除后刷新数据
            this.initRoles()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //折叠面板点击事件，使用角色id查询菜单
    changeCollapse(rid){
      if (rid){
        //初始化所有菜单
        this.initAllMenus()
        //根据角色id查询其所用拥有的菜单，选中
        this.initSelectedMenus(rid)
      }
    },
    //根据角色id查询其所拥有的菜单id
    initSelectedMenus(rid){
      this.getRequest('/system/basic/permiss/mid/' + rid).then(res => {
        if (res){
          this.selectMenus = res
        }
      })
    },
    //折叠面板修改事件，index为ref-tree的id
    onUpdate(rid, index){
      //根据循环的索引，获取当前点击的tree对象
      let tree = this.$refs.tree[index]
      //获取当前树形结构选中的菜单id，ture去除其父节点id（可能选中父节点下的几个节点，不是全选关系），只返回叶子节点的id
      let selectKeys = tree.getCheckedKeys(true);
      let url = '/system/basic/permiss/?rid=' + rid
      //构造url
      selectKeys.forEach(key => {
        url += '&mids=' + key
      })

      //发送请求
      this.putRequest(url).then(res => {
        if (res){
          //修改后关闭折叠面板
          this.activeName = -1
        }
      })
    },
    //取消修改
    cancelUpdate(){
      this.activeName = -1
    },
  },
  mounted() {
    this.initRoles()
  }
}
</script>

<style scoped>
.permissManaTool {
  display: flex;
  justify-content: flex-start;
}
.permissManaTool .el-input {
  width: 300px;
  margin-right: 6px;
}
.permissManaMain {
  margin-top: 10px;
  width: 710px;
}

</style>
